<template>
  <div class="app-container">
    <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="68px">

      <el-form-item label="标题" prop="title" style="float: left;">
        <el-input
          v-model="queryParams.title"
          placeholder="请输入标题"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="业务类型" prop="title">

        <el-select
          v-model="queryParams.businessType"
          placeholder="业务类型"
          clearable
          size="small"
          style="width: 240px"
        >
          <el-option
            v-for="dict in businessTypeOptions"
            :key="dict.id"
            :label="dict.name"
            :value="dict.id"
          />
        </el-select>
      </el-form-item>

      <!--<el-form-item label="提交审核时间" prop="senderTime">
        <el-date-picker clearable size="small" style="width: 200px"
                        v-model="queryParams.senderTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择提交审核时间">
        </el-date-picker>
      </el-form-item>-->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>

      </el-form-item>
    </el-form>

    <el-table
      v-loading="loading"
      class="list-table"
      :data="taskList"
      stripe
      size="small"
      fit
      highlight-current-row
      style="width: 100%;"
    >

      <el-table-column label="标题" align="left" prop="title" width="450">
        <template slot-scope="scope">
          <span
            v-html="scope.row.receiveMode == 1 ? scope.row.title : '<span style=\'background: red; color: #FFF; padding: 2px 4px; border-radius: 60px; margin-right: 5px;\'>退</span>' + scope.row.title "
          />
        </template>
      </el-table-column>

      <el-table-column label="业务名称" align="center" prop="businessName" />
      <el-table-column label="发起部门" align="center" prop="sendDeptName" />
      <el-table-column label="发起人" align="center" prop="senderName" />
      <!--  <el-table-column label="状态" align="center" prop="receiveMode" width="100">
          <template slot-scope="scope">
            <span v-html="scope.row.receiveMode == '1' ? '<font color=green>待审批</font>' : '<font color=red>退回</font>'"></span>
          </template>
        </el-table-column>-->
      <el-table-column label="发起时间" align="center" prop="sendTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.sendTime) }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="接收人ID" align="center" prop="receiverId"/>-->
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            style="color:#1890ff"
            @click="handleUpdate(scope.row)"
          >办理
          </el-button>
          <el-button
            v-hasPermi="['wf:udited:history:query']"
            size="mini"
            type="text"
            icon="el-icon-paperclip"
            style="color:#1890ff"
            @click="handleHistoryShow(scope.row)"
          >审批记录
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog title="请输入拒绝原因" :visible.sync="openReasonInput" width="650px">

      <el-row :gutter="20">

        <el-col :span="16" :offset="2">

          <el-input
            v-model="remark"
            type="textarea"
            :rows="7"
            placeholder="请输入审核意见"
            clearable
            size="small"
            style="margin-bottom: 20px;"
          />

        </el-col>
      </el-row>

      <div slot="footer" class="dialog-footer">
        <el-button type="danger" @click="handleEditRejectSubmit2">确认审批拒绝</el-button>
        <el-button @click="openReasonInput = false">取消</el-button>
      </div>

    </el-dialog>
    <!-- 审批记录弹出框 -->
    <todo-history
      :visible.sync="historyInfo.visible"
      :detail-data="historyInfo.detailInfo"
    />

  </div>
</template>

<script>
import {
  addTask,
  delTask,
  exportTask,
  getTask,
  listTask,
  updateTask,
  approval,
  reject,
  test,
  listAll
} from '@/api/hr/task'

import { TodoHistory } from '../finished/components'

export default {
  components: {
    TodoHistory
  },
  data() {
    return {
      historyInfo: { // 审批记录弹出框
        visible: false, // 是否显示模态框
        detailInfo: {}
      },

      // 遮罩层
      loading: false,

      // 选中数组
      ids: [],

      // 非单个禁用
      single: true,

      // 非多个禁用
      multiple: true,

      // 总条数
      total: 0,

      // 工作流待办事项表格数据
      taskList: [],

      // 弹出层标题
      title: '',

      // 是否显示弹出层
      open: false,

      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        businessType: undefined,
        businessName: undefined,
        businessId: undefined,
        title: undefined,
        senderId: undefined,
        senderTime: undefined,
        receiverId: undefined,
        senderName: undefined
      },

      // 表单参数
      form: {},

      // 表单校验
      rules: {},

      // 工资审批页面，假数据
      salaryList: [], // 工资列表（只允许查看）
      remark: '', // 拒绝原因
      openReasonInput: false, // 审批页面
      currentRow: {}, // 当前审批的行

      businessTypeOptions: [] // 业务类型

    }
  },
  created() {
    this.getList()

    // 加载业务类型
    listAll().then(response => {
      if (response.code != '200') {
        this.msgError('后台请求出错，原因是' + response.msg)
        return
      }
      this.businessTypeOptions = response.data
    })
  },
  methods: {

    handleHistoryShow(data = {}) { // 审批记录-弹出框显示
      this.historyInfo.visible = true
      this.historyInfo.detailInfo = data
    },

    /** 审批通过 */
    handlePassSubmit() {
      let auditOpinion = prompt('请输入审批意见！');
      const query = {
        id: this.currentRow.id,
        auditResult: '1',
        auditOpinion: auditOpinion || '同意'
      }

      console.log('本次请求参数为:', query)

      approval(query).then(response => {
        if (response.code != '200') {
          this.msgError('后台请求出错，原因是' + response.msg)
          return
        }

        this.msgSuccess('审批成功！')
        this.open = false
        this.getList() // 重新加载待审批列表
      })
    },

    /** 审批拒绝 */
    handleEditRejectSubmit() {
      this.openReasonInput = true
    },

    handleEditRejectSubmit2() {
      if (!this.remark) {
        this.msgError('审批拒绝必须输入审核意见！')
        return
      }

      const query = {
        id: this.currentRow.id,
        auditResult: '0',
        auditOpinion: this.remark
      }

      console.log('本次请求参数为:', query)

      reject(query).then(response => {
        if (response.code != '200') {
          this.msgError('后台请求出错，原因是' + response.msg)
          return
        }

        this.msgSuccess('审批拒绝成功！')
        this.open = false
        this.openReasonInput = false
        this.getList() // 重新加载待审批列表
      })
    },

    /** 查询工作流待办事项列表 */
    getList() {
      // this.loading = true
      console.log('本次请求参数为:', this.queryParams)
      listTask(this.queryParams).then(response => {
        // 查询成功，返回数据，grid分页显示
        this.taskList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        businessType: undefined,
        businessName: undefined,
        businessId: undefined,
        title: undefined,
        senderId: undefined,
        senderTime: undefined,
        receiverId: undefined,
        createTime: undefined
      }
      this.resetForm('form')
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },

    /** 审批按钮操作 */
    handleUpdate(row) {
      this.currentRow = row // 记录当前的行
      console.log('代办事项', row)
      // 根据webrootURL 跳转到对应的页面
      let webrouter = row.receiveMode == '1' ? row.auditWebRouter : row.editWebRouter

      const type = row.receiveMode == '1' ? '3' : '2'

      const query = {
        businessId: row.businessId,
        id: row.businessId,
        taskId: row.id,
        editWebRouter: row.editWebRouter,
        deptId: row.deptId,
        salaryDate: row.salaryMonth, // 发放月份
        type: type,
        title: row.title,
        task: 1
      }
      console.log('页面跳转参数', query)
      console.log('页面跳转到', webrouter)

      //增加退票的处理

      if(row.businessType == 4 && row.businessName == '退票申请'){
          query.tuiPiao = true  //方便共用页面，加上退票的标识
          if(row.receiveMode == 1 ){
             query.approve = true
             query.editWebRouter = 'Tuipiaomake'
             query.auditWebRouter = 'Tuipiaomake'
             webrouter = 'Tuipiaomake'
          }

          if(row.receiveMode == '0' ){
            query.type = 2;
            query.tuiPiao = true;
             webrouter = 'Tuipiaomake'
          }
      }




      this.$router.push({
        name: webrouter, // 踩坑记录： 首字母要大写！！！
        query: query
      })
    },

    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams
      this.$confirm('是否确认导出所有工作流待办事项数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return exportTask(queryParams)
      }).then(response => {
        this.download(response.msg)
      }).catch(function() {
      })
    }
  }
}
</script>
